<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据展示及交互</title>
</head>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../css/jquery.tipso.min.css" type="text/css">

<style type="text/css">
    .bd { border:1px solid #999999 }
    .allH { height: 100% }
    .gradient{
        filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#D0EEF4,endcolorstr=#1D8CC7,gradientType=0);
        -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#D0EEF4,endcolorstr=#1D8CC7,gradientType=0);/*IE8*/
        background: #D0EEF4; /* 一些不支持背景渐变的浏览器 */
        background:-moz-linear-gradient(top, #D0EEF4, #1D8CC7);
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#24B2D1), to(#166BBF));
        background:-o-linear-gradient(top, #D0EEF4, #1D8CC7);
    }
    .sel{ height: 50px; padding-top: 10px  }
    select{ width: 95%; height: 100%; background-color: #A3DDEE; color:blue }
    td{ padding-bottom: 15px }
    li>a{ color:#8A2BE2 }
    .anchorBL{display:none;}
    #mapZone label{max-width:none;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM&services=&t=20171114145936"></script>
<script language="JavaScript" src="../js/jquery.min.js"></script>
<script language="JavaScript" src="../js/jquery.tipso.min.js"></script>
<script language="JavaScript" src="../js/bootstrap.min.js"></script>
<script language="JavaScript" src="../js/echarts.min.js"></script>


<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-8" id="mapZone" style="height:650px">
            </div>
            <div class="col-md-4" style="height:650px">
                <div style="height: 300px" id="view1"></div>
                <div style="height: 350px" id="view2"></div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-md-12">
                <span class="label">文字标签</span>
                <div class="alert">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <h4>
                        描述!
                    </h4> <strong>提示!</strong> 可点击查看数据详情.
                </div>
            </div>
        </div>
    </div>


</body>

<script language="JavaScript" src="../js/public.js"></script>
<script src="../js/data.js"></script>

<script language="JavaScript">
    // 百度地图API功能
    var map = new BMap.Map("mapZone");


    var points = getPointReal();
    points.forEach(function(d, i){
        var corrds = d[4].split(',');
        var point = new BMap.Point(corrds[0], corrds[1]);
        var marker = new BMap.Marker(point);        // 创建标注
        map.addOverlay(marker);                     // 将标注添加到地图中
        if(i<5)marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        var sContent =
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ d[1] +"</h4>" +
                "<img style='float:right;margin:4px' id='imgDemo' src='../imgs/haikou.jpg' width='139' height='104' title='天安门'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;'>"+
                "商户地址：" + d[3] + "<br/>" + "商户状态：" + d[2] + "<br/>" + "商户代码：" + d[0] +
                "</p>" +
                "</div>";

        var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
        marker.addEventListener("click", function(){
            this.openInfoWindow(infoWindow);
            document.getElementById('imgDemo').onload = function (){
                infoWindow.redraw();
                drawPie("view1", "海南阳光国际旅行社有限公司");
                drawBar("view2");
            }
        });
    });




    var point = new BMap.Point(110.354569, 20.024504);

    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);

    drawPie("view1", "海南阳光国际旅行社有限公司");
    drawBar("view2");

    function drawBar(id){
        var names = [];
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(function(d){
            names.push(d + "月");
            return parseInt(Math.random() * 5000);
        });
        var option = {
            backgroundColor: 'rgb(43, 51, 59)',
            xAxis: {
                data: names,
                axisLine: {
                    lineStyle: {
                        color: '#0177d4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 14,
                    interval: 0,
                    rotate:45
                }
            },
            yAxis: {
                name: "（人）",
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 16
                },
                axisLine: {
                    lineStyle: {
                        color: '#0177d4'
                    }
                },
                axisLabel: {
                    color: '#fff',
                    fontSize: 16
                },
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#0177d4'
                    }
                },
                max:7000

            },
            series: [{
                type: 'bar',
                barWidth: 18,
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00b0ff'
                        }, {
                            offset: 0.8,
                            color: '#7052f4'
                        }], false)
                    }
                },
                data: data
            }]
        };

        Init3(option ,id);
    }

    function drawPie(id, title){
        var count = Math.random() * 5 + 5, data = [];
        var colors = ["#f845f1", "#ad46f3", "#5045f6", "#4777f5", "#44aff0", "#45dbf7", "#f6d54a", "#f69846", "#ff4343"];
        for(var i=0; i<count; i++){
            data.push({
                name:"维度" + (i + 1), value:(Math.random() * 50000 + 50000).toFixed(2), "itemStyle":
                { "normal": { "color": colors[i] } }
            });
        }
        data.sort(function(a, b){ return a.value - b.value; });
        for(var i=0; i<count; i++){
            data.push({
                "value": 0,
                "name": "",
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": false
                        },
                        "labelLine": {
                            "show": false
                        }
                    }
                }
            });
        }
        var names = data.map(function(d){ return d.name; });
        var option = {
            backgroundColor: 'rgb(43, 51, 59)',
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            "tooltip": {
                "trigger": "item",
                "formatter": "{a}<br/>{b}:{c}元"
            },
            "title": {
                "text": title + " 数据统计图",
                "left": "center",
                "top": 20,
                "textStyle": {
                    "color": "#ccc"
                }
            },
            "calculable": true,
            "legend": {
                "icon": "circle",
                "x": "center",
                "y": "15%",
                "data": names,
                "textStyle": {
                    "color": "#fff"
                }
            },
            "series": [{
                "name": "XX线索",
                "type": "pie",
                "radius": [
                    37,
                    155
                ],
                "avoidLabelOverlap": false,
                "startAngle": 0,
                "endAngle": 90,
                "center": [
                    "50.1%",
                    "34%"
                ],
                "roseType": "area",
                "selectedMode": "single",
                "label": {
                    "normal": {
                        "show": true,
                        "formatter": "{c}元"
                    },
                    "emphasis": {
                        "show": true
                    }
                },
                "labelLine": {
                    "normal": {
                        "show": true,
                        "smooth": false,
                        "length": 20,
                        "length2": 10
                    },
                    "emphasis": {
                        "show": true
                    }
                },
                "data": data
            }]
        };
        Init3(option, id);
    }


</script>
</html>